import {useState,useMemo,useEffect} from 'react'
const UseMemo = (props) => {
  const [count,setCount]=useState(1)
  const [price,setPrice]=useState(100)
  const [time,setTime]=useState(new Date())
  const [discount,setDiscount]=useState(0.8)
  const finalPrice=useMemo(()=>{
    console.log('computed')
    const res=price*discount*count
    return res>100?res*0.8:res
  },[count])
  // useEffect(()=>{
  //   const timer=setInterval(()=>{
  //     setTime(new Date())
  //   },1000)
  //   return ()=>{
  //     console.log('销毁')
  //     clearInterval(timer)
  //   }
  // },[])
  return (
    <div>
      <h1>UseMemo</h1>
      <p>count:{count}</p>
      <p>price:{price}</p>
      <p>discount:{discount}</p>
      <p>time:{time.toString()}</p>
      <p>finialPrice:{finalPrice}</p>
      <button onClick={()=>setCount(count+1)}>++</button>
      <button onClick={()=>setCount(count-1)}>--</button>
    </div>
  )
  }
  
  export default UseMemo